<template>
  <div class="login-container">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录">
        <div class="login-form">
          <Form
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            inline
            @keydown.enter.native="login"
          >
            <div class="item">
              <FormItem prop="user">
                <Input
                  type="text"
                  v-model="formInline.user"
                  placeholder="请输入账号"
                  size="large"
                >
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
            </div>
            <div class="item">
              <FormItem prop="password">
                <Input
                  type="password"
                  v-model="formInline.password"
                  placeholder="请输入密码"
                  size="large"
                >
                  <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
            </div>
            <div class="item">
              <FormItem>
                <Button type="primary" @click="login" class="summit"
                  >登录</Button
                >
              </FormItem>
            </div>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "Login",
  components:{Cookies},
  props: {},
  data() {
    return {
      formInline: {
        password: "",
        result: "",
        user: "",
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能少于6位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.checkToken();
  },
  mounted(){
    this.userCheck();
  },
  methods: {
    login() {
      var formInline = this.formInline;

      this.$axios.post("/api/hotel/login", formInline).then((response) => {
        var status = response.data.status;
        var result = response.data.data;
        if (status === 200) {
          console.log(result);
          //路由跳转
          if (result.token != null) {
            this.$store.commit("setToken", result.token);
            this.$store.commit("setUserAcco", result.emplAcco);
            this.$store.commit("setUserId", result.emplId);
            this.$store.commit("setUserName", result.emplName);
            this.$router.push("/Login/Home");
          }
        } else {
          alert(response.data);
        }
      });
    },
    checkToken() {
      var token = Cookies.get('token');
      console.log(token);
      if (token != null) {
        this.$router.push("/Login/Home");
      }
    },
    userCheck(){
      console.log(this.$store.getters.userName);
    }
  },
};
</script>

<style>
.login-container {
  background-color: #2d3a4b;
  height: 100vh;
}
.login-con {
  margin: auto;
  padding-top: 300px;
  width: 500px;
  height: 100%;
  position: relative;
}
.item {
}
.summit {
  width: 100px;
  height: 30px;
}
</style>